<template>
	<view class="search-page">
		<!-- 底部导航栏+搜索区域 -->

		<u-navbar autoBack left-icon="" placeholder class="u-navbar">
			<view class="nav-back" slot="left">
				<u-icon name="arrow-left" size="40"></u-icon>
			</view>
			<view class="nav-search" slot="center">
				<u-search placeholder=" 搜索目的地/景点" @custom="handleSearchBarClick" borderColor="#3478F6" bgColor="#FFFFFF"
					height="60rpx" searchIconSize="40" searchIconColor="#666666"
					:actionStyle="{'margin-right':'-25px',fontSize:'15px','background':'linear-gradient(90deg,#4C75E0 0%,#0AA1EE 100%)','border-radius':'16px',width:'55px',color:'white',height:'30px','line-height':'30px'}"></u-search>
			</view>
		</u-navbar>
		<view class="main-content">
			<!-- 历史搜索区域-->
			<view class="history">
				<view class="history-text">
					<u--text text="历史搜索" size="30"></u--text>
					<!--标签区域 -->
					<view style="margin-right: 5px;" @click="isClosable=!isClosable">
						<view v-show="isClosable">
							<u-icon size="40" label="完成"></u-icon>
						</view>
						<view v-show="!isClosable">
							<u-icon size="40" name="trash"></u-icon>
						</view>
					</view>
				</view>
				<view class="u-tag">
					<u-tag class="history_tag" :text="item" v-for="(item,index) in historyTags" :key="index"
						:closable="isClosable" bgColor="#F2F2F2" color="black" borderColor="#FFFFFF" shape="circle"
						size="large" @click="deleteTag"> </u-tag>
				</view>
			</view>

			<!-- 热门推荐区域 -->
			<view class="hot">
				<view class="history-text">
					<u--text text="热门推荐" size="30"></u--text>
					<!--标签区域 -->
					<view style="margin-right: 5px;" @click="isClosable=!isClosable">
						<view v-show="isClosable">
							<u-icon size="40" label="完成"></u-icon>
						</view>
						<view v-show="!isClosable">
							<u-icon size="40" name="trash"></u-icon>
						</view>
					</view>
				</view>
				<view class="u-tag">
					<u-tag :text="item" v-for="(item,index) in hotTags" :closable="isClosable" bgColor="#F2F2F2"
						color="black" borderColor="#FFFFFF" shape="circle"></u-tag>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isClosable: false,
				historyTags: ["北京", "故宫", "天安门", "温泉", "长城", "颐和园", "鸟巢", "798艺术区"],
				hotTags: ["上海迪士尼", "三亚海滩", "成都美食", "西安兵马俑", "大理洱海", "厦门鼓浪屿", "桂林山水", "西藏布达拉宫"]
			}
		},
		methods: {
			handleSearchBarClick() {
				uni.navigateTo({
					url: "/pages/search/search-result"
				})
			},
			deleteTag(index) {
			}
		}
	}
</script>

<style scoped>
	.u-navbar {
		padding-bottom: 10px;
	}

	.search-page {
		background-color: white;
		height: 100vh;

	}

	.nav-back {
		margin-left: -2px;
	}

	.nav-search {
		width: 80%;
	}

	::v-deep .u-search__content {
		border-width: 4rpx !important;
	}

	.main-content {
		background-color: #00000;
	}

	.history {
		height: 40vh;
		margin-left: 10px;
	}

	.history-text {
		display: flex;
	}

	.u-tag {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
		padding: 10rpx 0;
	}


	.hot {
		height: 40vh;
		margin-left: 10px;
	}
</style>